<template>
<!-- 优惠劵用户记录页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 -->
    <div class="abvoeBox">
            <span>用户名称:</span>
            <el-input placeholder="请输入内容" v-model="userName" class="abvoeBox_input"></el-input>
            <span style="margin-left:20px;">是否已使用:</span>
            <template>
                <el-radio v-model="useFlag" label="0" style="margin-left:20px;">未使用</el-radio>
                <el-radio v-model="useFlag" label="1" style="margin-left:20px;">已使用</el-radio>
            </template>
            <el-button type="success" @click="selectFoodieBeanEntityList()" style="margin-left:10px">查询</el-button>
            <el-button type="primary" @click="empty()" style="margin-left:10px">清空</el-button>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
        <el-table
            :data="tableData"
            style="width: 100%;">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="优惠劵名称">
                    <span>{{ props.row.couponName }}</span>
                </el-form-item>
                <el-form-item label="用户名称">
                    <span>{{ props.row.userName }}</span>
                </el-form-item>
                <el-form-item label="优惠劵规则">
                    <span>{{ '满'+props.row.couponRule+'元' }}</span>
                </el-form-item>
                <el-form-item label="优惠价钱">
                    <span>{{ props.row.couponPrice+'元' }}</span>
                </el-form-item>
                <el-form-item label="使用规则">
                    <span>{{props.row.couponUseRule===1?"无门槛":props.row.couponUseRule===2?"早餐":props.row.couponUseRule===3?"夜宵":"未知"}}</span>
                </el-form-item>
                <el-form-item label="使用标识">
                    <span>{{props.row.useFlag===0?"未使用":"已使用" }}</span>
                </el-form-item>
                <el-form-item label="结束标识">
                    <span>{{ props.row.useFlag===0?"未使用":"已使用" }}</span>
                </el-form-item>
                <el-form-item label="吃货豆规则">
                    <span>{{props.row.foodieBeanRule===0?"不可以使用":"可以使用"}}</span>
                </el-form-item>
                <el-form-item label="吃货豆数量" v-if="props.row.foodieBeanRule===1">
                    <span>{{ props.row.foodieBeanNumber }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                    <span>{{ props.row.createTime}}</span>
                </el-form-item>
                <el-form-item label="修改时间">
                    <span>{{ props.row.updateTime}}</span>
                </el-form-item>
                </el-form>
            </template>
            </el-table-column>
            <el-table-column
            label="优惠劵名称"
            prop="couponName">
            </el-table-column>
            <el-table-column
            label="用户名称"
            prop="userName">
            </el-table-column>
            <el-table-column
            label="开始时间"
            prop="startTime">
            </el-table-column>
            <el-table-column
            label="结束时间"
            prop="endTime">
            </el-table-column>
            <el-table-column
            label="使用标识"
            prop="useFlag">
            <template slot-scope="scope">
                <span>{{scope.row.useFlag===0?"未使用":"已使用"}}</span>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 模糊查使用标识
      useFlag: '',
      // 模糊查用户名称
      userName: '',
      // 全查吃货豆表数据集
      tableData: [],
      // 分页 （pageSize）一页展示10条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 10,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    // 全查优惠劵用户记录
    this.selectFoodieBeanEntityList()
  },
  methods: {
    // 清空模糊查条件，并全查数据
    empty () {
      this.useFlag = ''
      this.userName = ''
      this.selectFoodieBeanEntityList()
    },
    // 全查吃货豆类型表（模糊查用户名称）
    selectFoodieBeanEntityList () {
      this.$axios.get('/eat-service/couponUserRecord/selectCouponUserRecordEntityList',
        {
          params: {
            useFlag: this.useFlag,
            userName: this.userName,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectFoodieBeanEntityList()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectFoodieBeanEntityList()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
        /* background-color: royalblue; */
        /* position: relative; */
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
        /* position: absolute; */
    }
    .belowBox{
        margin-top: 20px;
    }
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
